<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>Document</title>
    <style type="text/css">
        .a {
            height: 200px;
            width: 200px;

        }

        :target {
            background: orange;
        }

        p:empty {
            display: none;
        }

        div :not([id="footer"]) {
            background: orange;
        }

        :root {
            background: #fff;
        }

        a[class^=icon] {
            background: green;
            color: #fff;
        }

        a[href$=pdf] {
            background: orange;
            color: #fff;
        }

        a[title*=more] {
            background: blue;
            color: #fff;
        }

        ol>li:nth-last-child(5) {
            background: orange;
        }

        h1:before {
            content: "我是被插进来的";
            color: red;
        }

        div {
            resize: none;
            /* 用户不能拖动元素修改尺寸大小。 */
            resize: both;
            /* 用户可以拖动元素，同时修改元素的宽度和高度 */
            resize: horizontal;
            /* 	用户可以拖动元素，仅可以修改元素的宽度，但不能修改元素的高度。 */
            resize: vertical;
            /* 用户可以拖动元素，仅可以修改元素的高度，但不能修改元素的宽度。 */
            resize: inherit;
            /* 继承父元素的resize属性值。 */
        }


        @keyframes changecolor {
            0% {
                background: red;
            }

            20% {
                background: blue;
            }

            40% {
                background: orange;
            }

            60% {
                background: green;
            }

            80% {
                background: yellow;
            }

            100% {
                background: red;
            }
        }

        div:hover {
            animation: changecolor 5s ease-out .2s;
        }
    </style>

</head>

<body>
    <div class='a'>
        aaa
        <div id='b'><a href="#b">b</a></div>
    </div>


</body>

</html>